<template>
    <div class="com-container">
        <div class="com-chart" ref='rank_ref'>地区销量排行图</div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import {request} from 'network/request'
    export default {
        name: '',
        data () {
            return {
                chartInstance:null,
                data:null,
                startValue:0,
                endValue:9,
                timeId:null
            }
        },
        created () {
            this.$socket.registerCallBack('rankData',this.getData)
        },
        mounted () {
          this.initChart()
          //this.getData()
          this.$socket.send({
                action:'getData',
                socketType:'rankData',
                chartName:'rank',
                value:''
          })
          window.addEventListener('resize',this.screenAdapter)
          this.screenAdapter()  
        },
        destroyed () {
            clearInterval(this.timeId)
            this.$socket.unRegisterCallBack('rankData')
        },
        computed: {
            ...mapState(['theme'])
        },
        methods: {
            initChart(){
                this.chartInstance=this.$echarts.init(this.$refs.rank_ref,this.theme)
                const initOption={
                    title:{
                        text:'▎地区销量排行',
                        left:20,
                        top:20
                    },
                    grid:{
                        top:'40%',
                        right:'5%',
                        left:'5%',
                        bottom:'5%',
                        containLabel:true
                    },
                    tooltip:{
                        show:true
                    },
                    xAxis:{
                        type:'category'
                    },
                    yAxis:{
                        type:'value'
                    },
                    series:[
                        {
                            type:'bar',
                            label:{
                                show:true,
                                position:'top',
                                color:'white'
                            }
                        }
                    ]
                }
                this.chartInstance.setOption(initOption)
                this.chartInstance.on('mouseover',()=>{
                    clearInterval(this.timeId)
                })
                this.chartInstance.on('mouseout',()=>{
                    this.startInterval()
                })
            },
            getData(res){
                // const {data:Data}=await request({url:'rank'})
                // 将数据从大到小排序
                // this.data=Data.sort((a,b)=>b.value-a.value)
                this.data=res.sort((a,b)=>b.value-a.value)
                this.updateChart()
                this.startInterval()
            },
            updateChart(){
                const colorArr=[
                    ['#0BA82C','#4FF778'],
                    ['#2E72BF','#23E5E5'],
                    ['#5052EE','#AB6EE5']
                ]
                // 处理数据
                const provinceArr=this.data.map(item=>item.name)
                const valueArr=this.data.map(item=>item.value)
                const dataOption={
                    xAxis:{
                        data:provinceArr
                    },
                    // 借用图例缩放实现平移动画效果
                    dataZoom:{
                        show:false,
                        startValue:this.startValue,
                        endValue:this.endValue
                    },
                    series:[
                        {
                            data:valueArr,
                            itemStyle:{
                                color:arg=>{
                                    let targetArr=[]
                                    if(arg.value>300){
                                        targetArr=colorArr[0]
                                    }else if(arg.value>200){
                                        targetArr=colorArr[1]
                                    }else{
                                        targetArr=colorArr[2]
                                    }
                                    return new this.$echarts.graphic.LinearGradient(0,0,0,1,[
                                            {
                                                offset:0,
                                                color:targetArr[0]
                                            },
                                            {
                                                offset:1,
                                                color:targetArr[1]
                                            }
                                    ])
                                }
                            }
                        }
                    ]
                }
                this.chartInstance.setOption(dataOption)
            },
            screenAdapter(){
                const titleFontSize=this.$refs.rank_ref.offsetWidth/100*3.6
                const adapterOption={
                    title:{
                        textStyle:{
                            fontSize:titleFontSize
                        }
                    },
                    series:[
                        {
                            barWidth:titleFontSize,
                            itemStyle:{
                                barBorderRadius:[titleFontSize/2,titleFontSize/2,0,0]
                            }
                        }
                    ]
                }
                this.chartInstance.setOption(adapterOption)
                this.chartInstance.resize()
            },
            startInterval(){
                if(this.timeId){
                    clearInterval(this.timeId)
                }
                this.timeId=setInterval(() => {
                    this.startValue++
                    this.endValue++
                    if(this.endValue>this.data.length-1){
                        this.startValue=0
                        this.endValue=9
                    }
                    this.updateChart()
                }, 2000);
            }
        },
        watch: {
            theme(){
                this.chartInstance.dispose()
                this.initChart()
                this.screenAdapter()
                this.updateChart()
            }
        }
    }
</script>

<style scoped>
 
</style>
